<div class="container-fluid">

  <div class="row">
    <event-nav (itemClick)="goto($event)" (backClick)="back()"
               [needCreate]="needCreate" [tabModel]="tabModel"></event-nav>
  </div>

  <div class="row">
    <div id="accordion" role="tablist" aria-multiselectable="true">
      <div *ngFor="let item of items; let i = index" class="card">
        <div class="card-header no-border" role="tab" id="headingOne">
          <h5 class="mb-0">
            <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                  aria-controls="collapseOne">
              <span [class.text-deleted]="item.disabled" class="pointer">{{item.typeName}}</span>
              &nbsp;&nbsp;
              <i (click)="showModal(item, 'edit', $event);" class="ion-edit link"></i>
              <i [class.ion-eye-disabled]="!item.disabled" [class.ion-eye]="item.disabled"
                 (click)="disable(item, $event);" class=" link"></i>
            </span>
          </h5>
        </div>
        <div [collapse]="item.disabled" id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="card-block top0">
            {{item.descr}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div bsModal #editPopup="bs-modal" class="modal fade" tabindex="-1" role="dialog"
     (onShown)="onModalShow()" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="hideModal('edit')" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">编辑</h4>
      </div>
      <div class="modal-body">
        <form [formGroup]="form" (ngSubmit)="onFormSubmit()" class="my-validate-form">
          <div class="form-group row">
            <label class="col-sm-2 col-form-label"><span>描述</span></label>
            <div class="col-sm-10">
              <textarea type="text" class="form-control" name="descr" formControlName="descr"
                        [(ngModel)]="item.descr" #descr></textarea>
            </div>
          </div>

          <div class="form-group row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
              <button type="submit" class="btn btn-primary" [disabled]="!form.valid">保存</button>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label"></label>
            <div class="col-sm-10">
              <div class="validate-errors">
                <div class="validate-error" *ngFor="let msg of formErrors">
                  <div>{{ msg }}</div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
